<template>
  <page-container>
    <supper-select @change="supperSelectChange" :options="supperSelectOptions"></supper-select>
    <a-card size="small">
      <div style="float: left; width: 400px">
        <a-input-group v-show="activeKey === '1'" compact>
          <a-select style="width: 30%" v-model:value="inputValue">
            <a-select-option value="">全 部</a-select-option>
            <a-select-option value="call">接警内容</a-select-option>
            <a-select-option value="deal">反馈内容</a-select-option>
            <a-select-option value="caseNo">警情单号</a-select-option>
            <a-select-option value="callPhone">报警电话</a-select-option>
            <a-select-option value="callAddress">报警地址</a-select-option>
          </a-select>
          <a-input-search
            v-model:value="inputParams"
            style="width: 70%"
            @search="inputSearch"
            placeholder="请输入关键词"
          />
        </a-input-group>
      </div>

      <div style="float: right">
        <span style="width: 70px">报警时间：</span>
        <a-space direction="vertical" :locale="zhCN">
          <a-range-picker @change="pickerChange" v-model:value="valueTime" :format="dateFormat" />
        </a-space>
      </div>
    </a-card>
    <a-card size="small" style="margin-top: 8px">
      <a-tabs size="small" v-model:activeKey="activeKey" @change="tabChange">
        <a-tab-pane key="1" tab="警情列表">
          <police-list
            portionUrl="/series/history/queryCaseList"
            :buttonList="btnList"
            @change="handleList"
            @ready="readyHandle"
            :params="ListParamsjq"
            topicType="ai"
          ></police-list>
        </a-tab-pane>
        <a-tab-pane key="2" tab="趋势视图">
          <div style="text-align: center">{{ featureValue }}相关警情趋势统计</div>
          <timeline
            v-if="trendList != ''"
            :height="500"
            type="传统"
            :data="trendList"
            :legend="['当前警情', '去年同期']"
            :fieldNames="{ name: 'dataDate', values: ['caseNum', 'yoyCaseNum'] }"
            @zrender:click="timeChartClickHandle"
          />
          <a-empty v-else />
        </a-tab-pane>
        <a-tab-pane key="3" tab="分类统计">
          <a-row>
            <a-col :span="12" style="border-right: 1px solid #cccccc">
              <div style="text-align: center">反馈类别-统计</div>
              <div v-if="multiStatDeal != ''">
                <pie
                  :data="multiStatDeal"
                  :height="600"
                  :fieldNames="{
                    name: 'dealSummaryName',
                    value: 'caseNum',
                  }"
                  @zrender:click="multiStatDealClick"
                />
                <div class="total">反馈总警情数：{{ totalDeal }}</div>
              </div>
              <a-empty style="margin-top: 100px" v-else />
            </a-col>
            <a-col :span="12">
              <div style="text-align: center">智能分类-统计</div>
              <div v-if="multiStatClassify != ''">
                <pie
                  :data="multiStatClassify"
                  :height="600"
                  :fieldNames="{
                    name: 'classifyName',
                    value: 'caseNum',
                  }"
                  @zrender:click="multiStatClassifyClick"
                />
                <div class="total">智能总警情数：{{ totalClassify }}</div>
              </div>
              <a-empty style="margin-top: 100px" v-else />
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="4" tab="辖区分析">
          <div style="text-align: center">辖区单位统计</div>
          <bar
            v-if="statList != ''"
            :data="statList"
            type="传统"
            :height="500"
            :fieldNames="{
              name: 'name',
              value: 'caseNum',
            }"
            title=""
            @zrender:click="statClick"
          />
          <a-empty style="margin-top: 100px" v-else />
        </a-tab-pane>
        <a-tab-pane key="5" tab="地图模式">
          <div class="analysis-map">
            <ol-map
              ref="mapInstance"
              height="100%"
              @moveend="handleMoveend"
              @movestart="movestartHandle"
            >
              <my-map-html
                v-for="(item, index) in mapList"
                :key="index"
                :visible="visibleHtml"
                :position="item.coordinate"
                :stopEvent="false"
              >
                <div
                  class="cluster"
                  v-if="item.heapNum && item.heapNum > 1"
                  @click="handlepolymerization(item)"
                >
                  {{ item.heapNum }}
                </div>
                <div
                  class="iconfont icon-weizhi marker"
                  v-else
                  @click="timeAxisClick(item.caseNo)"
                ></div>
              </my-map-html>
            </ol-map>
          </div>
        </a-tab-pane>
        <a-tab-pane class="card" key="6" tab="时间轴模式">
          <div
            v-if="timeAxisList != ''"
            @scroll.passive="getScroll($event)"
            style="height: 950px; overflow: auto"
          >
            <a-timeline
              v-if="timeAxisList != ''"
              mode="alternate"
              style="width: 940px; margin: 20px auto"
            >
              <a-timeline-item v-for="item in timeAxisList" :key="item.caseNo">
                <a-card style="width: 450px; text-align: left">
                  <template #title>
                    <div class="decoration" @click="timeAxisClick(item.caseNo)">
                      <span>警情单号：</span>
                      <span v-html="item.caseNo"></span>
                      <span v-if="item.caseNo != '' && item.jcaseNo != ''">|</span>
                      <span v-html="item.jcaseNo"></span>
                    </div>
                  </template>
                  <p>
                    报警内容:
                    <span v-html="item.caseDesc"></span>
                  </p>
                  <p>
                    出警情况:
                    <span v-html="item.dealDesc"></span>
                  </p>
                  <p style="color: #1890ff">
                    <clock-circle-outlined />
                    {{ item.callTime }}
                  </p>
                </a-card>
              </a-timeline-item>
            </a-timeline>
          </div>
          <a-empty v-else />
        </a-tab-pane>
      </a-tabs>
      <!-- 警情详情 -->
      <police-list-drawer
        v-model:visible="tabVisible"
        :title="titleData"
        :tabs="policeTabs"
      ></police-list-drawer>
      <a-drawer
        title="警情详情"
        :destroyOnClose="destroyOnClose"
        :width="600"
        :visible="visible"
        @close="onClose"
        :body-style="{ paddingBottom: '80px' }"
      >
        <police-details :case-no="timeCaseNo"></police-details>
      </a-drawer>
    </a-card>
  </page-container>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, createVNode, watchEffect, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import bar from '@/components/charts/bar/index.vue';
import PoliceDetails from '@/components/police-details/index.vue';
import SupperSelect from '@/components/supper-select/index.vue';
import { getParamsCodes } from '@/components/supper-select/index.js';
import Timeline from '@/components/charts/line/index.vue';
import PoliceList from '@/components/police-list/index.vue';
import Pie from '@/components/charts/pie/simple-pie/index.vue';
import PoliceListDrawer from '@/components/police-list-drawer/index.vue';
import { ClockCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import moment, { Moment } from 'moment';
import 'moment/dist/locale/zh-cn';
import { isNil } from 'lodash-es';
import { exportExcelFN2 } from '@/api/intelligentanalysis/alert';
import { Modal } from 'ant-design-vue';
import { downloadExcel } from '@/utils/download';
import {
  getQueryCaseTrend2,
  getQueryXqdwStat2,
  getQueryTimeLine2,
  getQueryMultiStat2,
} from '@/api/study-judge/list/details/research-details';
import { chartItem, bartItem, StatDeal, StatClassify } from '../typing';
import olMap from '@/components/openlayers/index.vue';
import MyMapHtml from '@/components/openlayers/packages/my-map-html';
import { queryCaseAgg } from '@/api/intelligentanalysis/map';
import { queryCenterPoint } from '@/api/index';

export default defineComponent({
  setup() {
    const router = useRouter();
    const routerQuery = router.currentRoute.value.query;
    const featureValue = ref<any>(routerQuery.featureValue);
    const callTimeStart = ref<any>(routerQuery.callTimeStart);
    const callTimeEnd = ref<any>(routerQuery.callTimeEnd);
    const classifyCodes = ref<any>(routerQuery.classifyCodes);
    const callSummaryCodes = ref<any>(routerQuery.callSummaryCodes);
    const dealSummaryCodes = ref<any>(routerQuery.dealSummaryCodes);
    const inputParams = ref<any>(routerQuery.inputParams);
    const xqdwCodes = ref<any>(routerQuery.xqdwCodes);

    const ListParams = reactive({
      callTimeStart: callTimeStart.value,
      callTimeEnd: callTimeEnd.value,
      seriesNo: routerQuery.seriesNo,
      xqdwCodes: xqdwCodes.value,
      classifyCodes: classifyCodes.value,
      callSummaryCodes: callSummaryCodes.value,
      dealSummaryCodes: dealSummaryCodes.value,
      inputType: '',
      inputParams: '',
      subdivisionFlag: 'Y',
      trafficFlag: 'N',
      otherFlag: 'N',
      page: 1,
      size: 10,
    });
    const ListParamsjq = reactive({
      callTimeStart: callTimeStart.value,
      callTimeEnd: callTimeEnd.value,
      seriesNo: routerQuery.seriesNo,
      xqdwCodes: xqdwCodes.value,
      classifyCodes: classifyCodes.value,
      callSummaryCodes: callSummaryCodes.value,
      dealSummaryCodes: dealSummaryCodes.value,
      inputType: '',
      inputParams: inputParams.value,
      subdivisionFlag: 'Y',
      trafficFlag: 'N',
      otherFlag: 'N',
      page: 1,
      size: 10,
      element: inputParams.value,
    });

    // 时间轴参数
    const TimeParams = {
      callTimeStart: callTimeStart.value,
      callTimeEnd: callTimeEnd.value,
      seriesNo: routerQuery.seriesNo,
      xqdwCodes: xqdwCodes.value,
      classifyCodes: classifyCodes.value,
      callSummaryCodes: callSummaryCodes.value,
      dealSummaryCodes: dealSummaryCodes.value,
      inputType: '',
      inputParams: '',
      subdivisionFlag: 'Y',
      trafficFlag: 'N',
      otherFlag: 'N',
      page: 1,
      size: 10,
    };

    // 地图参数
    let queryForm = reactive({
      callTimeStart: callTimeStart.value,
      callTimeEnd: callTimeEnd.value,
      inputParams: '',
      seriesNo: routerQuery.seriesNo,
      xqdwCodes: xqdwCodes.value,
      classifyCodes: classifyCodes.value,
      callSummaryCodes: callSummaryCodes.value,
      dealSummaryCodes: dealSummaryCodes.value,
      caseNos: '',
      classifyType: '',
      maxLatitude: '',
      maxLongitude: '',
      minLatitude: '',
      minLongitude: '',
      mapLayer: '12',
      page: '1',
      underLayer: 0,
    });

    const supperSelectOptions = [
      {
        type: 'ai',
        checkedKeys: classifyCodes.value != null ? classifyCodes : '',
      },
      {
        type: 'jq',
        checkedKeys: callSummaryCodes.value != null ? callSummaryCodes : '',
      },
      {
        type: 'fk',
        checkedKeys: dealSummaryCodes.value != null ? dealSummaryCodes : '',
      },
      {
        type: 'xqdw',
        checkedKeys: xqdwCodes.value != null ? xqdwCodes : '',
      },
    ];

    const dateFormat = 'YYYY-MM-DD HH:mm:ss';
    const inputValue = ref<string>('');
    const activeKey = ref<string>('1');
    const destroyOnClose = ref<boolean>(true);
    const tabVisible = ref<boolean>(false);
    const titleData = ref<string>('');
    const policeTabs = ref<Array<any>>([]);
    const valueTime = ref<Moment[]>([
      moment(callTimeStart.value, dateFormat),
      moment(callTimeEnd.value, dateFormat),
    ]);

    const total = ref<number>(0);
    const caseNos = ref<any>([]);
    const handleList = value => {
      caseNos.value = value.toString();
    };
    const readyHandle = val => {
      total.value = val;
    };
    //导出
    const exportHandle = () => {
      if (total.value)
        if (caseNos.value.length) {
          let obj = Object.assign({ caseNos: caseNos.value });
          exportFile(obj);
        } else {
          Modal.confirm({
            title: '提示',
            icon: createVNode(ExclamationCircleOutlined),
            content: '是否导出全部数据？',
            okText: '确认',
            cancelText: '取消',
            onOk() {
              let obj = ref<any>(ListParamsjq);
              obj.value.page = 0;
              obj.value.size = 0;
              exportFile(obj.value);
            },
          });
        }
    };
    const btnList = ref([
      {
        type: '',
        name: '导出',
        clickHandle: exportHandle,
        loading: false,
        disabled: false,
      },
    ]);
    const exportFile = params => {
      btnList.value[0].loading = true;
      exportExcelFN2(params)
        .then(res => {
          downloadExcel(res, '警情列表');
        })
        .finally(() => {
          btnList.value[0].loading = false;
        });
    };
    watchEffect(() => {
      btnList.value[0].disabled = total.value === 0;
    });

    const tabChange = () => {
      //   titleData.value = '';
      if (activeKey.value == '2') {
        getTrend();
      } else if (activeKey.value == '3') {
        getMultiStat();
      } else if (activeKey.value == '4') {
        getStat();
      } else if (activeKey.value == '5') {
        // getMapData();
      } else if (activeKey.value == '6') {
        getTime();
      }
    };
    //趋势视图
    const trendList = ref<chartItem>();
    const getTrend = async () => {
      const res = await getQueryCaseTrend2(ListParams);
      if (res.code === 200) {
        trendList.value = res.data;
      }
    };
    //分类统计
    const multiStatDeal = ref<Array<StatDeal>>([]); //反馈
    const multiStatClassify = ref<Array<StatClassify>>([]); //智能
    const totalDeal = ref(); //反馈总警情
    const totalClassify = ref(); //智能总警情
    const getMultiStat = async () => {
      const res = await getQueryMultiStat2(ListParams);
      if (res.code === 200) {
        if (res.data) {
          totalDeal.value = res.data.deal.count;
          totalClassify.value = res.data.classify.count;
          multiStatDeal.value = res.data.deal.list;
          multiStatClassify.value = res.data.classify.list;
        }
      }
    };
    //辖区分析
    const statList = ref<bartItem>();
    const getStat = async () => {
      const res = await getQueryXqdwStat2(ListParams);
      if (res.code === 200) {
        statList.value = res.data;
      }
    };

    //时间轴
    const timeAxisList = ref<any>();
    const timeCount = ref<any>();

    const getTime = async () => {
      const res = await getQueryTimeLine2(ListParams);
      if (res.code === 200) {
        timeCount.value = res.data.count;
        timeAxisList.value = res.data.details;
        timeAxisList.value.concat(res.data.details);
      }
    };

    const supperSelectChange = data => {
      const { ai, jq, fk, xqdw } = getParamsCodes(data);
      ListParams.xqdwCodes = xqdw;
      ListParams.classifyCodes = ai;
      ListParams.callSummaryCodes = jq;
      ListParams.dealSummaryCodes = fk;
      ListParamsjq.xqdwCodes = xqdw;
      ListParamsjq.classifyCodes = ai;
      ListParamsjq.callSummaryCodes = jq;
      ListParamsjq.dealSummaryCodes = fk;
      queryForm.xqdwCodes = xqdw;
      queryForm.classifyCodes = ai;
      queryForm.callSummaryCodes = jq;
      queryForm.dealSummaryCodes = fk;
      tabChange();
    };

    //搜索框
    const inputSearch = (searchValue: string) => {
      ListParamsjq.inputType = inputValue.value;
      ListParamsjq.inputParams = searchValue;
    };

    //时间选择器
    const pickerChange = (val: Moment[]) => {
      ListParams.callTimeStart = val[0] ? val[0].format(dateFormat) : '';
      ListParams.callTimeEnd = val[1] ? val[1].format(dateFormat) : '';
      ListParamsjq.callTimeStart = val[0] ? val[0].format(dateFormat) : '';
      ListParamsjq.callTimeEnd = val[1] ? val[1].format(dateFormat) : '';
      tabChange();
    };

    const lineParams = [
      {
        name: '当期警情',
        url: '/series/history/queryCaseList',
        params: reactive({
          callTimeStart: callTimeStart.value,
          callTimeEnd: callTimeEnd.value,
          seriesNo: routerQuery.seriesNo,
          xqdwCodes: xqdwCodes.value,
          classifyCodes: classifyCodes.value,
          callSummaryCodes: callSummaryCodes.value,
          dealSummaryCodes: dealSummaryCodes.value,
          inputType: '',
          inputParams: '',
          subdivisionFlag: 'Y',
          trafficFlag: 'N',
          otherFlag: 'N',
          page: 1,
          size: 50,
        }),
        type: 'ai',
      },
      {
        name: '去年同期',
        url: '/series/history/queryCaseList',
        params: reactive({
          callTimeStart: callTimeStart.value,
          callTimeEnd: callTimeEnd.value,
          seriesNo: routerQuery.seriesNo,
          xqdwCodes: xqdwCodes.value,
          classifyCodes: classifyCodes.value,
          callSummaryCodes: callSummaryCodes.value,
          dealSummaryCodes: dealSummaryCodes.value,
          inputType: '',
          inputParams: '',
          subdivisionFlag: 'Y',
          trafficFlag: 'N',
          otherFlag: 'N',
          page: 1,
          size: 50,
        }),
        type: 'ai',
      },
    ];
    //折线图点击事件
    const timeChartClickHandle = (index, item) => {
      const dataStart = `${item.dataDate} 00:00:00`;
      const dataEnd = `${item.dataDate} 23:59:59`;
      titleData.value = item.dataDate;
      lineParams[0].params.callTimeStart = dataStart;
      lineParams[0].params.callTimeEnd = dataEnd;
      lineParams[1].params.callTimeStart = moment(dataStart).subtract(1, 'year').format(dateFormat);
      lineParams[1].params.callTimeEnd = moment(dataEnd).subtract(1, 'year').format(dateFormat);

      lineParams[0].params.xqdwCodes = ListParams.xqdwCodes;
      lineParams[0].params.classifyCodes = ListParams.classifyCodes;
      lineParams[0].params.callSummaryCodes = ListParams.callSummaryCodes;
      lineParams[0].params.dealSummaryCodes = ListParams.dealSummaryCodes;
      lineParams[1].params.xqdwCodes = ListParams.xqdwCodes;
      lineParams[1].params.classifyCodes = ListParams.classifyCodes;
      lineParams[1].params.callSummaryCodes = ListParams.callSummaryCodes;
      lineParams[1].params.dealSummaryCodes = ListParams.dealSummaryCodes;

      policeTabs.value = lineParams;
      tabVisible.value = true;
    };

    const policeListParams = [
      {
        name: '',
        url: '/series/history/queryCaseList',
        params: reactive({
          callTimeStart: callTimeStart.value,
          callTimeEnd: callTimeEnd.value,
          seriesNo: routerQuery.seriesNo,
          xqdwCodes: xqdwCodes.value,
          classifyCodes: classifyCodes.value,
          callSummaryCodes: callSummaryCodes.value,
          dealSummaryCode: dealSummaryCodes.value,
          inputType: '',
          inputParams: '',
          subdivisionFlag: 'Y',
          trafficFlag: 'N',
          otherFlag: 'N',
          page: 1,
          size: 50,
        }),
        type: 'ai',
      },
    ];
    //辖区分析点击事件
    const statClick = (index, item) => {
      const params = {
        callTimeStart: callTimeStart.value,
        callTimeEnd: callTimeEnd.value,
        seriesNo: routerQuery.seriesNo,
        xqdwCodes: xqdwCodes.value,
        xqdwCode: item.code,
        classifyCodes: classifyCodes.value,
        callSummaryCodes: callSummaryCodes.value,
        dealSummaryCode: dealSummaryCodes.value,
        inputType: '',
        inputParams: '',
        subdivisionFlag: 'Y',
        trafficFlag: 'N',
        otherFlag: 'N',
        page: 1,
        size: 50,
      };

      const tabParams = [
        {
          name: '',
          url: '/series/history/queryCaseList',
          params: reactive({ ...params }),
          type: 'ai',
        },
      ];

      policeTabs.value = tabParams;
      tabVisible.value = true;
    };

    //反馈类别-统计点击事件
    const multiStatDealClick = e => {
      const dataIndex = e?.target?.dataIndex;
      if (!isNil(dataIndex)) {
        policeListParams[0].params.xqdwCodes = ListParams.xqdwCodes;
        policeListParams[0].params.classifyCodes = ListParams.classifyCodes;
        policeListParams[0].params.dealSummaryCode = multiStatDeal.value[dataIndex].dealSummaryCode;
        policeListParams[0].params.callSummaryCodes = ListParams.callSummaryCodes;
        policeTabs.value = policeListParams;
        tabVisible.value = true;
      }
    };

    //智能分类-统计点击事件
    const multiStatClassifyClick = e => {
      const dataIndex = e?.target?.dataIndex;
      if (!isNil(dataIndex)) {
        policeListParams[0].params.xqdwCodes = ListParams.xqdwCodes;
        policeListParams[0].params.callSummaryCodes = ListParams.callSummaryCodes;
        policeListParams[0].params.dealSummaryCode = ListParams.dealSummaryCodes;
        policeListParams[0].params.classifyCodes = multiStatClassify.value[dataIndex].classifyCode;
        policeTabs.value = policeListParams;
        tabVisible.value = true;
      }
    };
    const visible = ref<boolean>(false);
    const timeCaseNo = ref<string>('');
    //时间轴
    const timeAxisClick = caseNo => {
      timeCaseNo.value = caseNo;
      visible.value = true;
    };
    const onClose = () => {
      visible.value = false;
    };

    const getScroll = async event => {
      if (event.target.scrollTop >= event.target.scrollHeight - event.target.clientHeight) {
        TimeParams.page += 1;
        const res = await getQueryTimeLine2(TimeParams);
        if (res.code === 200) {
          timeCount.value = res.data.count;
          timeAxisList.value = timeAxisList.value.concat(res.data.details);
        }
      }
    };

    //地图
    const paramsMap = [
      {
        name: '',
        url: '/map/queryCaseList',
        params: reactive({
          callTimeStart: callTimeStart.value,
          callTimeEnd: callTimeEnd.value,
          page: '1',
          size: '50',
          caseNos: '',
        }),
      },
    ];
    const centerPoint = ref<Array<number>>([]);
    const getCenterPoint = () => {
      queryCenterPoint(queryForm)
        .then(res => {
          centerPoint.value = [res.data.longitude, res.data.latitude];
          mapInstance.value.setCenter(centerPoint.value);
          numberOfVisits.value++;
        })
        .catch(err => {
          console.log('获取中心点err=', err);
        });
    };
    //经纬度集合
    const mapList = ref<any>([]);
    const visibleHtml = ref(false);
    const handleMoveend = e => {
      let extent = e.frameState.extent;
      queryForm.minLongitude = extent[0];
      queryForm.minLatitude = extent[1];
      queryForm.maxLongitude = extent[2];
      queryForm.maxLatitude = extent[3];
      queryForm.mapLayer = e.frameState.viewState.zoom;
      if (numberOfVisits.value === 0) {
        getCenterPoint();
      } else if (numberOfVisits.value > 0) {
        getMapData();
      }
    };
    const mapInstance = ref();
    const numberOfVisits = ref(0);
    //获取经纬度
    const getMapData = () => {
      queryCaseAgg(queryForm).then(res => {
        const list: Array<any> = [];
        res.data.details.forEach(item => {
          const coordinate = [
            item.longitude || item.avgLongitude,
            item.latitude || item.avgLatitude,
          ];
          list.push({
            coordinate,
            heapNum: item.heapNum,
            caseNo: item.caseNo,
          });
        });
        mapList.value = list.slice(0, 999);

        nextTick(() => {
          visibleHtml.value = true;
        });
      });
    };

    //地图警情详情
    const handlepolymerization = item => {
      paramsMap[0].params.caseNos = item.caseNo;
      policeTabs.value = paramsMap;
      tabVisible.value = true;
    };
    const movestartHandle = () => {
      visibleHtml.value = false;
    };

    return {
      zhCN,
      timeCaseNo,
      visible,
      tabVisible,
      destroyOnClose,
      trendList,
      featureValue,
      statList,
      multiStatDeal,
      multiStatClassify,
      timeAxisList,
      totalDeal,
      totalClassify,
      ListParamsjq,
      inputValue,
      valueTime,
      dateFormat,
      activeKey,
      btnList,
      exportFile,
      handleList,
      caseNos,
      titleData,
      policeTabs,
      supperSelectOptions,
      //方法
      onClose,
      tabChange,
      getTrend,
      getStat,
      getTime,
      inputSearch,
      getMultiStat,
      supperSelectChange,
      pickerChange,
      readyHandle,
      timeChartClickHandle,
      multiStatDealClick,
      multiStatClassifyClick,
      timeAxisClick,
      statClick,
      getScroll,
      inputParams,

      //地图
      mapList,
      visibleHtml,
      handleMoveend,
      movestartHandle,
      handlepolymerization,
      mapInstance,
    };
  },
  components: {
    bar,
    Pie,
    olMap,
    MyMapHtml,
    PoliceDetails,
    SupperSelect,
    PoliceListDrawer,
    PoliceList,
    Timeline,
    ClockCircleOutlined,
  },
});
</script>
<style lang="less" scoped>
.total {
  float: right;
  margin-right: 40px;
}
:deep(.highlight) {
  color: red;
}
.icon-weizhi:before {
  color: #409eff;
  font-size: 20px;
  content: '\e640';
}
.analysis-map {
  height: 100%;

  .cluster {
    width: 32px;
    height: 32px;
    color: #fff;
    line-height: 32px;
    text-align: center;
    background: rgba(#1b81e0, 0.85);
    border-radius: 50%;
    cursor: pointer;
    &:hover {
      background: rgba(#1b81e0, 0.95);
    }
    &:active {
      background: rgba(#eb8924, 0.95);
    }
  }
  .marker {
    cursor: pointer;
    &::before {
      color: rgba(#1b81e0);
      font-size: 24px;
    }
    &:hover {
      &::before {
        color: rgba(#1b81e0, 0.85);
      }
    }
    &:active {
      &::before {
        color: rgba(#eb8924, 0.95);
      }
    }
  }
}
:deep(.decoration) {
  cursor: pointer;
}
:deep(.decoration):hover {
  text-decoration: underline;
}
:deep(.card .ant-card-head) {
  background: #4d649a;
}
</style>
